<template>
  <div class="container">
    <div class="tree-table">
      <el-form
        :model="queryParams"
        ref="queryRef"
        :inline="true"
        v-show="showSearch"
        label-width="82px"
      >
        <el-form-item label="企业代码：" prop="field1">
          <el-input
            v-model="queryParams.field1"
            placeholder="请输入企业代码"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="企业名称：" prop="field2">
          <el-select
            v-model="queryParams.field2"
            placeholder="请输入或选择企业名称"
            clearable
            style="width: 200px"
          >
            <el-option
              v-for="dict in sys_normal_disable"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="评估对象：" prop="field3">
          <el-input
            v-model="queryParams.field3"
            placeholder="请输入评估对象"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>

        <el-form-item
          label="所出资企业信息："
          label-width="130px"
          prop="field4"
        >
          <el-input
            v-model="queryParams.field4"
            placeholder="请输入所出资企业信息："
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="Refresh" @click="resetQuery"
            >{{ centerDialogVisible }}重置</el-button
          >
        </el-form-item>
      </el-form>
      <Splitpanes class="default-theme" @resized="handleResize">
        <!--部门数据-->
        <Pane size="18" ref="myElement">
          <el-tree
            style="
              --el-tree-node-content-height: 40px;
              overflow: auto;
              display: flex;
              justify-content: start;
              width: 100%;
            "
            :data="treeData"
            :props="defaultProps"
            :render-content="renderContent"
            :load="loadNode"
            lazy
          />
        </Pane>
        <!--用户数据-->
        <Pane size="82">
          <el-table
            :data="tableData"
            stripe="false"
            height="calc(100% - 7rem)"
            style="width: 100%; font-size: 14px"
          >
            <el-table-column label="序号" width="50">
              <template #default="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column prop="code" label="企业代码" width="160" />
            <el-table-column prop="name" label="企业名称" width="280">
              <template #default="scope">
                <span
                  class="text-overflow"
                  @click="handleView(scope.$index, scope.row)"
                  >{{ scope.row.name }}</span
                >
              </template>
            </el-table-column>
            <el-table-column prop="evaluation" label="评估对象" />
            <el-table-column prop="info" label="所出资企业信息" width="180" />
            <el-table-column label="打印操作" width="100">
              <template #default="scope">
                <el-button
                  size="small"
                  text
                  @click="handlePrint(scope.$index, scope.row)"
                  style="font-size: 14px; color: #5ecfff"
                >
                  打印
                </el-button>
              </template>
            </el-table-column>
            <el-table-column label="打印轨迹" width="120">
              <template #default="scope">
                <el-button
                  size="small"
                  text
                  @click="handleView(scope.$index, scope.row)"
                  style="font-size: 14px; color: #5ecfff"
                >
                  打印轨迹
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="demo-pagination-block">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[20, 40, 80, 100]"
              :size="size"
              :disabled="disabled"
              :background="background"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </Pane>
      </Splitpanes>
    </div>
    <!-- 打印 -->
    <el-dialog
      v-model="centerDialogVisible"
      title="打印"
      width="600"
      align-center
    >
      <div class="dialog-print">打印信息</div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="centerDialogVisible = false">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Index" >
import { Splitpanes, Pane } from "splitpanes";
const router = useRouter();
import "splitpanes/dist/splitpanes.css";
const currentPage = ref(4);
const pageSize = ref(20);
const size = ref("default");
const background = ref(false);
const disabled = ref(false);

const treeData = ref([]); // 初始数据为空数组，表示根节点
const defaultProps = {
  children: "children", // 子节点属性名称
  label: "name", // 显示字段名称
  isLeaf: "leaf",
};
const tableData = ref([
  {
    code: "110000769355935",
    name: "北京能源集团有限责任公司",
    evaluation: "嘉亿(北京)股权投资基金管理有限公司股东全部权益价值",
  },
  {
    code: "110000769905140",
    name: "北京控股集团有限公司",
    evaluation: "北京北控交通装备有限公司",
  },
  {
    code: "110000773350504",
    name: "北京房地集团有限公司",
    evaluation: "北京丰台区马家堡东路7号",
  },
  {
    code: "110000782504544",
    name: "北京首都开发控股(集团)有限公司",
    evaluation:
      "投资性房地产北京市朝阳区柳芳北里乙12号楼1层1-2、2层1-5投资性房地产",
  },
  {
    code: "110000769355935",
    name: "北京能源集团有限责任公司",
    evaluation: "嘉亿(北京)股权投资基金管理有限公司股东全部权益价值",
  },
  {
    code: "110000769905140",
    name: "北京控股集团有限公司",
    evaluation: "北京北控交通装备有限公司",
  },
  {
    code: "110000773350504",
    name: "北京房地集团有限公司",
    evaluation: "北京丰台区马家堡东路7号",
  },
  {
    code: "110000782504544",
    name: "北京首都开发控股(集团)有限公司",
    evaluation:
      "投资性房地产北京市朝阳区柳芳北里乙12号楼1层1-2、2层1-5投资性房地产",
  },
  {
    code: "110000769355935",
    name: "北京能源集团有限责任公司",
    evaluation: "嘉亿(北京)股权投资基金管理有限公司股东全部权益价值",
  },
  {
    code: "110000769905140",
    name: "北京控股集团有限公司",
    evaluation: "北京北控交通装备有限公司",
  },
  {
    code: "110000773350504",
    name: "北京房地集团有限公司",
    evaluation: "北京丰台区马家堡东路7号",
  },
  {
    code: "110000782504544",
    name: "北京首都开发控股(集团)有限公司",
    evaluation:
      "投资性房地产北京市朝阳区柳芳北里乙12号楼1层1-2、2层1-5投资性房地产",
  },
  {
    code: "110000769355935",
    name: "北京能源集团有限责任公司",
    evaluation: "嘉亿(北京)股权投资基金管理有限公司股东全部权益价值",
  },
  {
    code: "110000769905140",
    name: "北京控股集团有限公司",
    evaluation: "北京北控交通装备有限公司",
  },
  {
    code: "110000773350504",
    name: "北京房地集团有限公司",
    evaluation: "北京丰台区马家堡东路7号",
  },
  {
    code: "110000782504544",
    name: "北京首都开发控股(集团)有限公司",
    evaluation:
      "投资性房地产北京市朝阳区柳芳北里乙12号楼1层1-2、2层1-5投资性房地产",
  },
  {
    code: "110000769355935",
    name: "北京能源集团有限责任公司",
    evaluation: "嘉亿(北京)股权投资基金管理有限公司股东全部权益价值",
  },
  {
    code: "110000769905140",
    name: "北京控股集团有限公司",
    evaluation: "北京北控交通装备有限公司",
  },
  {
    code: "110000773350504",
    name: "北京房地集团有限公司",
    evaluation: "北京丰台区马家堡东路7号",
  },
  {
    code: "110000782504544",
    name: "北京首都开发控股(集团)有限公司",
    evaluation:
      "投资性房地产北京市朝阳区柳芳北里乙12号楼1层1-2、2层1-5投资性房地产",
  },
]);

const showSearch = ref(true);
const { proxy } = getCurrentInstance();
const sys_normal_disable = ref([
  {
    label: "正常",
    value: "0",
  },
  {
    label: "停用",
    value: "1",
  },
]);
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    field1: undefined,
    field2: undefined,
    field3: undefined,
    field4: undefined,
  },
});
const { queryParams } = toRefs(data);
// 随机真假
function randomBoolean() {
  return false;
  // const result = Math.random() < 0.5;
  // return result;
}
// 随机企业数量
function randomNum() {
  return Math.floor(Math.random() * 1000);
}
const renderContent = (h, { node, data, store }) => {
  return h("p", [
    h("span", null, data.name), // 显示主字段
    h(
      "span",
      { style: "margin-left: 10px; color: #888; margin-right: 10px; " },
      `【${data.number}】`
    ), // 显示次字段，用括号括起来，并改变颜色和间距以区分
  ]);
};
// 模拟异步加载子节点数据的方法
const loadNode = (node, resolve) => {
  if (node.level === 0) {
    // 根节点加载数据
    return resolve([
      { id: 1, name: "北京市", number: randomNum(), leaf: false },
    ]); // 示例数据，实际应根据 API 获取
  } else if (node.level > 0) {
    // 子节点加载数据，此处仅为示例，实际应用中应该调用 API 获取数据
    setTimeout(() => {
      // 模拟异步请求
      const childrenData = [
        // 子节点示例数据
        {
          name: "1企业名称 " + (node.id * 10 + 1),
          id: node.id * 10 + 1,
          number: randomNum(),
          leaf: randomBoolean(),
        },
        {
          name: "2企业名称 " + (node.id * 10 + 2),
          id: node.id * 10 + 2,
          number: randomNum(),
          leaf: randomBoolean(),
        },
      ];
      resolve(childrenData); // 解析子节点数据
    }, 500); // 延时500毫秒模拟异步请求时间
  }
};

/** 查询按钮操作 */
function handleQuery() {}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}
// 查看
function handleView(index, row) {
  console.log("查看");
  console.log(index, row);
  router.push("/index/details?code=" + row.code);
}
// 打印
const centerDialogVisible = ref(false);
const printRow = ref({});
function handlePrint(index, row) {
  centerDialogVisible.value = true;
  printRow.value = row;
}
// 关闭打印
function handleClose() {
  // centerDialogVisible.value = false;
  // printRow.value = {};
}
// 导出
function handleExport() {
  console.log("导出");
  exportExcel("printMe");
}
// 导入
function handleImport() {
  console.log("导入");
}
// 分页改变事件
const handleSizeChange = (val) => {
  console.log(`${val} items per page`);
};
// 分页点击事件
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`);
};

const myElement = ref(null); // 创建一个ref对象来引用DOM元素
function handleResize() {
  if (myElement.value) {
    const widthStr =
      document.getElementsByClassName("splitpanes__pane")[0].style.width;
    let num = Number(widthStr.replace("%", ""));
    const leftTreeWidth = Math.floor(((window.innerWidth - 50) * num) / 100);
    document.getElementsByClassName("el-tree-node__content")[0].style.width =
      leftTreeWidth + "px"; // 设置左侧树形控件的宽度
  }
}
onMounted(async () => {
  await nextTick(); // 等待 DOM 更新完成
  handleResize(); // 初始化时调用一次吧
});
</script>

<style scoped lang="scss">
.container {
  width: 100vw;
  height: calc(100vh - 110px);
  padding: 10px 15px;
  box-sizing: border-box;
  :deep(.el-table__body) {
    .el-table__row--striped td {
      background-color: #f2f2f2 !important;
    }
  }
  .text-overflow {
    color: rgb(94, 207, 255);
    cursor: pointer;
  }
  .tree-table {
    height: 100%;
  }
  .default-theme {
    height: calc(100% - 45px);
    .splitpanes__pane {
      overflow: auto;
      border: 1px solid #c2c2c2;
    }
    :deep(.el-tree) {
      .el-tree-node__content {
        min-width: 250px;
      }
      .el-tree-node.is-current > :first-child {
        /* 当前选中节点样式 */
        background-color: #f2f2f2 !important;
      }
    }
  }
  .demo-pagination-block {
    width: 100%;
    margin-top: 20px;
    padding-right: 10px;
    box-sizing: border-box;
    :deep(.el-pagination) {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      flex-direction: row-reverse;
      align-items: center;
      .is-first {
        margin-left: 16px !important;
      }
    }
  }
  :deep(.el-form) {
    .el-form-item__label {
      font-weight: normal;
    }
  }
  :deep(.el-form--inline) {
    .el-form-item {
      margin-right: 22px;
    }
  }
}
</style>

